<template>
    <view>
        <!-- pages/wallet/index.wxml -->
        <view>
            <view class="header">
                <!-- <image class="ydbg" src="{{imgUrl + 'my-bg.png'}}"></image> -->
            </view>
            <view class="walletbox">
                <view class="textbox">
                    <view class="wallettext1 mr-10">
                        <text>￥</text>
                        {{ accountObj.balance }}
                    </view>
                    <view class="wallettext2">总余额（元）</view>
                    <view class="flexbox-sb">
                        <view class="flexbox-center">
                            <view class="wallettext3">{{ accountObj.realBalance }}</view>
                            <view class="wallettext2">可用余额</view>
                        </view>
                        <view class="flexbox-center">
                            <view class="wallettext3">{{ accountObj.freezebalance }}</view>
                            <view class="wallettext2">待发放收益</view>
                        </view>
                    </view>
                </view>
                <view class="usebtn" @tap.stop.prevent="getWallet">提现</view>
                <!-- <van-icon class="icon" name="question-o" size="14px" /> -->
            </view>
            <!-- <view class="title">您有54意豆即将过期，请尽快使用～</view> -->
            <view class="detailbox">
                <view class="flexbox-sb centers box1" @tap="onDetails">
                    <view class="centers">
                        <image class="icon-40 mr-10" :src="imgUrl + 'wallet.png'"></image>
                        <text class="box1text1">收支明细</text>
                    </view>
                    <view>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <view class="flexbox-sb centers box1" @tap="onDetailsOrder">
                    <view class="centers">
                        <image class="icon-40 mr-10" :src="hairimgUrl + 'wallet-details-order.png'"></image>
                        <text class="box1text1">全部订单明细</text>
                    </view>
                    <view>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <view class="flexbox-sb centers box1" @tap="onDetailsBox">
                    <view class="centers">
                        <van-icon class="mr-10" name="orders-o" color="#FFBC47" size="40rpx" />
                        <text class="box1text1">盒子收款记录</text>
                    </view>
                    <view>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <view class="flexbox-sb centers box1" @tap="onHairOrder">
                    <view class="centers">
                        <image class="icon-40 mr-10" :src="imgUrl + 'referrer2.png'"></image>
                        <text class="box1text1">美发师订单统计</text>
                    </view>
                    <view>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <!-- <view class="flexbox-sb box2" wx:for="{{assetlist}}" wx:key="index">
      <view>
        <view class="box2text1">{{item.title}}</view>
        <view>
          <text class="box2text2">{{item.createtime}}</text>
        </view>
      </view>
      <view class="box2text3">
        <text class="c-1" wx:if="{{item.status == 1}}">+{{item.changebalance}}</text>
        <text class="c-2" wx:if="{{item.status == 0}}">-{{item.changebalance}}</text>
      </view>
    </view> -->
            </view>
            <view class="date_centers">
                <view class="date_box">
                    <view :data-indexs="index" @tap="onTabs"
                        :class="'date_item ' + (index == dateIndex ? 'date_item_active' : '')"
                        v-for="(item, index) in date" :key="index">
                        {{ item.day }}
                    </view>
                </view>
                <view class="money_box">
                    <view :data-indexs="index" class="money_item mt-30" v-for="(item, index) in moneyList" :key="index">
                        <view class="money_title">{{ item.title }}</view>

                        <view class="money_hx" v-if="index == 0 || index == 2"></view>

                        <view :class="(item.color ? 'money_red' : 'money_orange') + ' mt-20'">{{ item.num }}</view>
                    </view>
                </view>
            </view>
            <view class="canvas_box">
                <view class="containers">
                    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" :ec="ec"></ec-canvas>
                </view>
            </view>
        </view>
        <van-dialog use-slot title="提示" :show="show" :show-confirm-button="false">
            <view class="msg">很抱歉，您还没有升级创客身份，不能提现，快去升级创客身份吧，享更多权益！</view>
            <view class="flexbox-sb box">
                <view class="btn1" @tap="onClose">
                    <image class="btnimg" :src="imgUrl + 'walletleftbtn.png'"></image>
                    <text class="btntext">算了</text>
                </view>
                <view class="btn2" @tap="onUnderstand">
                    <image class="btnimg" :src="imgUrl + 'walletrightbtn.png'"></image>
                    <text class="btntext">了解一下</text>
                </view>
            </view>
        </van-dialog>
    </view>
</template>

<script>
import ecCanvas from '../ec-canvas';
import vanDialog from '@/wxcomponents/vant/dist/dialog/index';
// ec-canvas/wallet/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';

const { getOldSevenDay } = require('../../utils/util.js');

import * as echarts from '../echarts';
let chart = null;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
        // title: {
        //   text: '',
        //   left: ''
        // },
        legend: {
            data: [
                {
                    name: '预约订单',
                    itemStyle: {
                        color: '#FFC08B'
                    },
                    lineStyle: {
                        color: '#FFC08B'
                    }
                },
                {
                    name: '完成订单',
                    itemStyle: {
                        color: '#5B8FF9'
                    },
                    lineStyle: {
                        color: '#5B8FF9'
                    }
                },
                {
                    name: '订单收入',
                    itemStyle: {
                        color: '#EE6666'
                    },
                    lineStyle: {
                        color: '#EE6666'
                    }
                }
            ],
            top: 10,
            left: 'center',
            backgroundColor: 'transparent',
            z: 100
        },
        grid: {
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                alignWithLabel: true
            },
            data: ['0时', '3时', '6时', '9时', '12时', '15时', '18时', '21时']
        },
        yAxis: [
            {
                type: 'value',
                min: 0,
                // y轴刻度最小值
                minInterval: 1,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                // min: 0,
                // max: 250,
                minInterval: 1,
                position: 'right',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#EE6666'
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '预约订单',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                lineStyle: {
                    color: '#FFC08B'
                },
                itemStyle: {
                    color: '#FFC08B'
                }
            },
            {
                name: '完成订单',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                lineStyle: {
                    color: '#5B8FF9'
                },
                itemStyle: {
                    color: '#5B8FF9'
                }
            },
            {
                name: '订单收入',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                lineStyle: {
                    color: '#EE6666'
                },
                itemStyle: {
                    color: '#EE6666'
                }
            }
        ]
    };
    chart.setOption(option);
    return chart;
}

export default {
    components: {
        ecCanvas,
        vanDialog
    },
    data() {
        return {
            ec: {
                onInit: initChart
            },
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            hairimgUrl: app.globalData.hairimgUrl,
            //全局美发师img路径
            show: false,
            accountObj: null,
            assetlist: [],
            bank: null,
            date: [
                {
                    day: '今日'
                },
                {
                    day: '昨日'
                },
                {
                    day: '近七日'
                }
            ],
            dateIndex: 0,
            // 默认选中0
            moneyList: [
                {
                    title: '待服务订单',
                    num: 12
                },
                {
                    title: '完成订单',
                    num: 67
                },
                {
                    title: '预计收入(元)',
                    num: 344.92,
                    color: 'red'
                },
                {
                    title: '结算收入(元)',
                    num: 2223.31,
                    color: 'red'
                }
            ],
            type: 0,
            // 订单类型
            orderCountObj: null,
            // 订单数据
            OldSevenDay: [] //前七天日期
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            OldSevenDay: getOldSevenDay().map((n) => n.Week)
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取余额
        _request
            .get('/wallet/getCashInfo', {
                id: uni.getStorageSync('userid'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    accountObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 获取余额明细

        _request
            .get('/bill/getNewsAssetList', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    assetlist: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 订单服务数据

        this.getStylistOrderCount(this.type);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () { },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () { },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () { },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () { },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () { },
    methods: {
        //获取Echarts数据列表
        getEchartsData(allReceiptNumList, allSuccessNumList, orderIncomeList) {
            let xdata = [];
            console.log(this.dateIndex);

            if (this.dateIndex == 2) {
                xdata = this.OldSevenDay;
                allReceiptNumList = allReceiptNumList.reverse();
                allSuccessNumList = allSuccessNumList.reverse();
                orderIncomeList = orderIncomeList.reverse();
            } else {
                xdata = ['0时', '3时', '6时', '9时', '12时', '15时', '18时', '21时'];
            }

            var option = {
                // title: {
                //   text: '',
                //   left: ''
                // },
                legend: {
                    data: [
                        {
                            name: '预约订单',
                            itemStyle: {
                                color: '#FFC08B'
                            },
                            lineStyle: {
                                color: '#FFC08B'
                            }
                        },
                        {
                            name: '完成订单',
                            itemStyle: {
                                color: '#5B8FF9'
                            },
                            lineStyle: {
                                color: '#5B8FF9'
                            }
                        },
                        {
                            name: '订单收入',
                            itemStyle: {
                                color: '#EE6666'
                            },
                            lineStyle: {
                                color: '#EE6666'
                            }
                        }
                    ],
                    top: 10,
                    left: 'center',
                    backgroundColor: 'transparent',
                    z: 100
                },
                grid: {
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: xdata // show: false
                },
                yAxis: [
                    {
                        // x: 'center',
                        type: 'value',
                        min: 0,
                        // y轴刻度最小值
                        minInterval: 1,
                        // min: 0,
                        // max: 10,
                        // splitLine: {
                        //   lineStyle: {
                        //     type: 'dashed'
                        //   }
                        // }
                        // show: false
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        // min: 0,
                        // max: 250,
                        minInterval: 1,
                        position: 'right',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#EE6666'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '预约订单',
                        type: 'line',
                        // stack: 'Total', // 设置会导致数据相同时不对齐
                        data: allReceiptNumList,
                        lineStyle: {
                            color: '#FFC08B'
                        },
                        itemStyle: {
                            color: '#FFC08B'
                        }
                    },
                    {
                        name: '完成订单',
                        type: 'line',
                        // stack: 'Total', // 设置会导致数据相同时不对齐
                        data: allSuccessNumList,
                        lineStyle: {
                            color: '#5B8FF9'
                        },
                        itemStyle: {
                            color: '#5B8FF9'
                        }
                    },
                    {
                        name: '订单收入',
                        type: 'bar',
                        yAxisIndex: 1,
                        barWidth: '15',
                        // stack: 'Total', // 设置会导致数据相同时不对齐
                        data: orderIncomeList,
                        lineStyle: {
                            color: '#EE6666'
                        },
                        itemStyle: {
                            color: '#EE6666'
                        }
                    }
                ]
            };
            setTimeout(() => {
                chart.clear();
                chart.setOption(option);
            }, 500);
        },

        // 切换日期
        onTabs(e) {
            this.setData(
                {
                    dateIndex: e.currentTarget.dataset.indexs,
                    type: e.currentTarget.dataset.indexs
                },
                () => {
                    this.getStylistOrderCount(e.currentTarget.dataset.indexs);
                }
            );
        },

        // 全部订单详情
        onDetailsOrder() {
            uni.navigateTo({
                url: '/ec-canvas/wallet/orderdetails/index'
            });
        },

        // 盒子收款记录
        onDetailsBox() {
            uni.navigateTo({
                url: '/ec-canvas/wallet/boxdetails/index'
            });
        },

        // 美发师订单系统
        onHairOrder() {
            uni.navigateTo({
                url: '/ec-canvas/wallet/orderstatistics/index'
            });
        },

        // 提现
        getWallet() {
            let bool = uni.getStorageSync('maker')?.ismaker || false; // if (bool) {
            //   this.setData({
            //     show: false
            //   });
            //   wx.navigateTo({
            //     url: '/pages/wallet/withdraw/index',
            //   })
            // } else {
            //   this.setData({
            //     show: true
            //   })
            // }

            uni.navigateTo({
                url: '/pages/wallet/withdraw/index'
            });
        },

        // 去了解创客卡
        onUnderstand() {
            this.setData({
                show: false
            });
            uni.navigateTo({
                url: '/pages/maker/buymaker/index'
            });
        },

        // 钱包明细
        onDetails() {
            uni.navigateTo({
                url: '/pages/wallet/withdrawdetails/index'
            });
        },

        // 关闭弹窗
        onClose() {
            this.setData({
                show: false
            });
        },

        // 订单服务数据 type 0 今天； 1 昨天； 2 近7天；3 近30天
        getStylistOrderCount(type) {
            let vm = this;

            _request
                .get('/storeOrder/getStoreOrderCount', {
                    storeId: uni.getStorageSync('storeId'),
                    type
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data;
                        let allSuccessNumList = data.allSuccessNumList.map((v) => {
                            return v.value;
                        });
                        let allReceiptNumList = data.allReceiptNumList.map((v) => {
                            return v.value;
                        });
                        let orderIncomeList = data.orderIncomeList.map((v) => {
                            return v.value;
                        });
                        vm.getEchartsData(allReceiptNumList, allSuccessNumList, orderIncomeList);
                        vm.setData({
                            moneyList: vm.moneyList.map((item) => {
                                switch (item.title) {
                                    case '待服务订单':
                                        item.num = data.allReceiptNum;
                                        break;

                                    case '完成订单':
                                        item.num = data.allSuccessNum;
                                        break;

                                    case '预计收入(元)':
                                        item.num = data.allReceiptMoney;
                                        break;

                                    case '结算收入(元)':
                                        item.num = data.allSuccessMoney;
                                        break;

                                    default:
                                        break;
                                }

                                return item;
                            })
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/wallet/index.wxss */
/* 顶部 */
.ydbg {
    width: 100%;
    height: 200rpx;
}

.header {
    width: 100%;
    height: 200rpx;
    background: linear-gradient(360deg, #ff8722 0%, #ffbc47 100%);
}

/* 意豆 */
.walletbox {
    width: 710rpx;
    height: 350rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-radius: 5px;
    position: relative;
    top: -100rpx;
    margin: 0 20rpx;
}

.icon {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.usebtn {
    position: absolute;
    right: 0;
    /* top: calc(50% - 24rpx); */
    top: 100rpx;
    width: 100rpx;
    height: 48rpx;
    background: #ff8722;
    border-radius: 200rpx 0px 0px 200rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
}

.textbox {
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;
}

.wallettext1 {
    height: 90rpx;
    font-size: 64rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 90rpx;
    padding-top: 30rpx;
}

.wallettext3 {
    height: 90rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 90rpx;
    padding-top: 30rpx;
    width: 100%;
}

.wallettext1>text {
    font-size: 40rpx;
    font-weight: 600;
}

.wallettext2 {
    height: 20rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20rpx;
    padding-top: 10rpx;
}

.flexbox-center {
    width: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.title {
    width: 100%;
    text-align: center;
    position: relative;
    top: -100rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
}

/* 明细 */
.detailbox {
    width: 710rpx;
    margin: 0rpx 20rpx 0 20rpx;
    padding: 0 20rpx 60rpx 20rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    position: relative;
    top: -100rpx;
}

.box1 {
    height: 124rpx;
    border-bottom: 1px solid #ededed;
}

.box1text1 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 50rpx;
}

.c-1 {
    color: #ff1717;
}

.c-2 {
    color: #53d393;
}

/* 跳窗样式 */
.btn1 {
    width: 268rpx;
    height: 96rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    position: relative;
}

.btn2 {
    width: 268rpx;
    height: 96rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    position: relative;
}

.btntext {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 86rpx;
}

.msg {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    margin-top: 40rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.box {
    margin: 60rpx 0;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.btnimg {
    width: 268rpx;
    height: 96rpx;
    position: absolute;
}

/* 数据列表 */
.date_centers {
    display: flex;
    justify-content: center;
    position: relative;
    top: -40rpx;
    flex-wrap: wrap;
}

.date_box {
    width: 600rpx;
    height: 68rpx;
    background: #ffefe1;
    border-radius: 34rpx;
    display: flex;
    justify-content: space-between;
}

.date_item {
    padding: 0 40rpx;
    line-height: 68rpx;
    height: 68rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    border-radius: 34rpx;
    text-align: center;
}

.date_item_active {
    color: #fff;
    background: #ff8722;
    font-size: 32rpx;
}

.money_box {
    display: flex;
    flex-wrap: wrap;
    width: 600rpx;
    padding: 30rpx 0;
}

.money_item {
    width: 50%;
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
}

.money_title {
    width: 100%;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.money_red {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff1717;
}

.money_orange {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
}

.money_hx {
    position: absolute;
    height: 60rpx;
    border: 1px solid #e8e8e8;
    right: 0;
    top: 20rpx;
}

/* 
图表 */
page {
    height: 100%;
}

.canvas_box {
    position: relative;
    width: 750rpx;
    height: 600rpx;
}

.containers {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

ec-canvas {
    width: 100%;
    height: 100%;
}
</style>
